<template>
  <div class="admin-container">
    <!-- 左侧导航栏 -->
    <el-aside width="200px">
      <el-menu router>
        <el-menu-item index="/admin/meeting">会议室管理</el-menu-item>
        
        <!-- 修正用户管理子菜单标签 -->
        <el-sub-menu index="/admin/user">
          <template #title>用户管理</template>
          <el-menu-item index="/admin/client">客户管理</el-menu-item>
          <el-menu-item index="/admin/staff">员工管理</el-menu-item>
          <el-menu-item index="/admin/audit">审核管理员</el-menu-item>
        </el-sub-menu>

        <!-- 修正统计后台子菜单标签 -->
        <el-sub-menu index="/admin/stats">
          <template #title>统计后台</template>
          <el-menu-item index="/admin/stats">流量统计</el-menu-item>
          <el-menu-item index="/admin/sales">营业额统计</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 右侧内容区域 -->
    <el-container>
      <el-header>
        <div class="admin-header" style="background: #e3f2fd; padding: 0 2rem;">
          <h1 style="color: #2c3e50; margin: 0;">管理员后台</h1>
          <div class="user-avatar" @click.stop="toggleDropdown">
            <el-avatar :size="40" :icon="User" class="avatar-icon" style="background-color: #409eff; color: white; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(64,158,255,0.3)" />
            <div v-if="showDropdown" class="dropdown-menu">
              <div class="menu-item" @click="handleProfile">个人信息</div>
              <div class="menu-item" @click="handleLogout">退出登录</div>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <!-- 路由视图，显示子页面 -->
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogVisible" title="个人信息" width="30%">
      <el-form :model="formData" :rules="formRules" ref="formRef" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="formData.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formData.password" type="password" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="formData.realName" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone" :rules="[{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入有效的11位手机号码' }]">
          <el-input v-model="formData.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { 
  ElMenu,
  ElMenuItem,
  ElSubMenu,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem
} from 'element-plus';
import { User } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const showDropdown = ref(false);

const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value;
};

const dialogVisible = ref(false);
const formRef = ref(null);

const formRules = {
  username: [
    { required: true, message: '用户名不能为空' }
  ],
  realName: [
    { required: true, message: '真实姓名不能为空' }
  ],
  phone: [
    { required: true, message: '手机号不能为空' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的11位手机号码' }
  ]
};

const formData = ref({
  username: '',
  password: '',
  realName: '',
  phone: '',
  company: '',
});

const handleProfile = async () => {
  try {
    const response = await axios.get("/api/admin/account");
    formData.value = response.data.data;
    formData.value.password = null;
    
    dialogVisible.value = true;
  } catch (error) {
    console.error('获取个人信息失败:', error);
    ElMessage.error('获取信息失败');
  }
};

const handleSave = async () => {
  try {
    await formRef.value.validate((valid) => {
      if (!valid) {
        ElMessage.error('请完善表单信息');
        return;
      }
    });
    await axios.post('/api/admin/account/update', formData.value, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    ElMessage.success('保存成功');
    dialogVisible.value = false;
  } catch (error) {
    if (!error.response) {
      ElMessage.error('表单验证失败');
    }
    console.error('保存失败:', error);
  }
};

const handleLogout = async () => {
  try {
    await axios.get('/api/admin/account/loginout');
    window.location.href = '/admin-login';
  } catch (error) {
    console.error('退出登录失败:', error);
  }
};
</script>

<style scoped>
.admin-container {
  min-height: 100vh;
  display: flex;
}

.admin-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.user-avatar {
  position: relative;
  cursor: pointer;
}

.user-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 55px;
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  min-width: 120px;
  z-index: 1000;
}

.menu-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s;
}

.menu-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

h1 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
}
</style>